import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
import "../style/less/topNav.less"
import '../style/less/admin.less'
import axios from "./common/request"
import _ from 'lodash'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter
} from "react-router-dom"
import {
    LocaleProvider,
    Layout,
    Menu,
    Breadcrumb,
    Icon,
    Form,
    Input,
    Button,
    Row, Col,
} from 'antd'
import zhCN from 'antd/lib/locale-provider/zh_CN'
import util from './common/util'
import menus from './config/menus'

const { Content, Sider, Footer } = Layout
const { SubMenu } = Menu
const mountNode = document.getElementById('console-main')

import ApplyActivity from './apps/activity/modules/applyActivity'
import ActivityListIndex from './apps/activity/activityListIndex'
import HasApplyListIndex from './apps/activity/hasApplyListIndex'
import EditActivityIndex from './apps/activity/editActivityIndex'
import {ExhibitionList,ExhibitorInfo,ExhibitorManage,EditExhibition,ExhibitorList} from './apps/exhibition'
import CorporationIndex from './apps/user/certificate/corporationIndex'
import PersonIndex from './apps/user/certificate/personIndex'
import EditShopIndex from './apps/shop/editShopIndex'
import NewRequireIndex from "./apps/require/newRequireIndex";
import requireListIndex from './apps/require/requireListIndex'
import EnrollActivityIndex from'./apps/user/enroll/enrollActivityIndex'
import StarActivityIndex from './apps/user/star/starActivityIndex'
import InformListIndex from './apps/inform/informListIndex'
import BaseInforIndex from './apps/user/baseInfor/baseInforIndex'

const renderMenu = menu => {
    if (!menu.menus) {
        return <Menu.Item key={menu.key}>{menu.name}</Menu.Item>
    } else {
        return (
            <SubMenu key={menu.key} title={<span>{menu.name}</span>}>
            {menu.menus.map(m => {
                return <Menu.Item key={m.key}>{m.name}</Menu.Item>
            })}
            </SubMenu>
        )
    }
}

const getOpenKeys = () => {
    let path = window.location.pathname
    return path.split('/')[2]
}

const getSelectedKeys= () => {
    let path = window.location.pathname
    return path.split('/').slice(2).join('/')
}

class SideMenu extends React.Component {
    constructor() {
        super()
    }
    navigate(item) {
        window.scrollTo(0, 0)
        this.props.history.push(`/console/${item.key}`)
    }
    render() {
        let { topMenus, bottomMenus } = menus
        return (
            <Menu
                mode="inline"
                onSelect = { this.navigate.bind(this) }
                defaultOpenKeys={[getOpenKeys()]}
                defaultSelectedKeys={[getSelectedKeys()]}
            >
            {topMenus.map(m => {
                return renderMenu(m) 
            })}
            <li style={{backgroundColor: '#f3f3f3', height: '8px'}}></li>
            {bottomMenus.map(m => {
                return renderMenu(m) 
            })}
            </Menu>
        )
    }
}

const SideMenuWrapper = withRouter(SideMenu)

class App extends React.Component {
    constructor() {
        super()
    }
    componentWillMount = () => {
        axios.get("/api/common/login/status")
            .then((response)=> {
                if (response.data.status.code=== 1) {
                    document.getElementsByClassName("namespace")[0].innerHTML=response.data.result
                }
            })
        axios.get("/api/notify/count")
            .then((response)=> {
                if (response.data.status.code=== 1) {
                    document.getElementById('notifyNumber').innerHTML=response.data.result
                }
            })
    }
    render() {
        let app = null
        app = (
            <Layout>
                <Content className="console-content">
                    <Layout>
                        <Sider width={220} className="console-menu">
                            <div className="console-user-info">
                                <center><p><br/>USER INFO</p></center>
                            </div>
                            <div className="console-menu-block">
                                <SideMenuWrapper />
                            </div>
                        </Sider>
                        <Content style={{ marginLeft: '12px' }}>
                            <div className="quick-btn">
                                <Row gutter={16}>
                                    <Col span={4}>
                                        <Link to="/console/exhibition/edit/-1"><Button style={{padding:"0px"}} size="large" className="quickButton"><Icon style={{backgroundColor:"#86b97e"}} className="quickIcon" type="tags"/><span className="quickSpan">一键办展</span></Button></Link>
                                    </Col>
                                    <Col span={4}>
                                        <Link to="/console/activity/editActivity/-1"><Button style={{padding:"0px"}} size="large" className="quickButton"><Icon style={{backgroundColor:"#ffb751"}} className="quickIcon" type="link"/><span className="quickSpan">发布活动</span></Button></Link>
                                    </Col>
                                    <Col span={4}>
                                        <Button style={{padding:"0px"}} size="large" className="quickButton"><Icon style={{backgroundColor:"#6fb2dd"}} className="quickIcon" type="form"/><span className="quickSpan">发布需求</span></Button>
                                    </Col>
                                    <Col span={4}>
                                        <Button style={{padding:"0px"}} size="large" className="quickButton"><Icon style={{backgroundColor:"#d25b47"}} className="quickIcon" type="shop"/><span className="quickSpan">创建店铺</span></Button>
                                    </Col>
                                    <Col span={4}>
                                        <Link to="/console/exhibition/exhibitorInfo/-1"><Button style={{padding:"0px"}} size="large" className="quickButton"><Icon style={{backgroundColor:"#86b97e"}} className="quickIcon" type="user-add"/><span className="quickSpan">参展商登陆</span></Button></Link>
                                    </Col>
                                </Row>
                            </div>
                            <div className="console-router-content">
                                <Route path="/console/activity/activityList/:status" component={ActivityListIndex} />
                                <Route path="/console/activity/editActivity/:id" component={EditActivityIndex}/>
                                <Route path="/console/activity/applyActivity/:id" component={ ApplyActivity } />
                                <Route path="/console/activity/hasApplyList/:id" component={ HasApplyListIndex } />
                                <Route path="/console/shop/editShop/:id" component={EditShopIndex} />
                                <Route path="/console/exhibition/exhibitorInfo/:id" component={ExhibitorInfo} />
                                <Route path="/console/exhibition/exhibitorManage/:id" component={ExhibitorManage} />
                                <Route path="/console/exhibition/list/:status" component={ExhibitionList} />
                                <Route path="/console/exhibition/edit/:id" component={ EditExhibition } />
                                <Route path="/console/exhibition/exhibitorList" component={ ExhibitorList } />
                                <Route path="/console/auth/corporationCertificate" component={CorporationIndex} />
                                <Route path="/console/auth/personCertificate" component={PersonIndex} />
                                <Route path="/console/require/newRequire" component={NewRequireIndex}/>
                                <Route path="/console/require/requireList/:status" component={requireListIndex}/>
                                <Route path="/console/user/enroll/activity" component={EnrollActivityIndex} />
                                <Route path="/console/userInfo" component={BaseInforIndex} />
                                <Route path="/console/user/star/activity" component={StarActivityIndex} />
                                <Route path="/console/inform/informList/:status" component={InformListIndex} />
                            </div>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
        return (
            <LocaleProvider locale={zhCN}>{app}</LocaleProvider>
        )
    }
}

ReactDOM.render(<Router><App /></Router>, mountNode)

